<template>
    <div>
       <el-form
       label-width="100"
       :model="form"
       class="myform"
       status-icon
       :rules="rules"
       ref="myform"
       >
       <el-form-item label="用户名称" prop="username">
           <el-input type="text" placeholder="请输入" v-model="form.username"
           :prefix-icon="User"
           ></el-input>
       </el-form-item>
       <el-form-item label="登录密码" prop="password">
           <el-input type="password" placeholder="请输入" v-model="form.password"
            :prefix-icon="Lock"    
           ></el-input>
       </el-form-item>
    
    <el-form-item >
           <p class="flex">
                    <el-button type="primary" class="btn" @click="submitForm('myform')"
                        >登录</el-button
                    >
                    <el-button type="danger" class="btn" @click="resetForm('myform')">重置</el-button>
                </p>
       </el-form-item>
   <el-form-item class="lastitem">
                <div class="links">
                    <router-link class="litem" :to="{name:'register'}">
                        没有账号,立即注册
                    </router-link>
                        <router-link class="litem color"  :to="{name:'forgetpass'}">
                        忘记密码 
                    </router-link>
                </div>
            </el-form-item>
    
       </el-form>
    </div>
</template>

<script>
import {toRefs,reactive,ref, onMounted,getCurrentInstance} from "vue"
import {Calendar, Search,User,Lock} from "@element-plus/icons"
import {reg} from "@/utils/validate"
import { ElMessage } from 'element-plus'
import {ajax} from "@/api"
import {useRouter} from "vue-router"
export default {
    setup(props,context){
        const router = useRouter()
        const {proxy} =getCurrentInstance()
        const myform = ref()
        const state = reactive({
            form:{

            },
            Calendar,
            Search,
            User,
            Lock,
            reg,
            rules:{
                username:[
                    {
                        required: true,
                        message: '请输入用户名',
                        trigger: 'blur',
                    },
                ],
                password:[
                    {
                        required: true,
                        message: '请输入密码',
                        trigger: 'blur',
                    },
                    {
                        pattern:reg.pwd,
                        trigger:'blur',
                        message:"请输入6-16的数字字母密码组合"
                    }
                ]
            }
        })

        const submitForm = ()=>{
            myform.value.validate(async vaild=>{
                if(vaild){
                    //正则通过  Ajax login
                     const {code,result,token} = await ajax.loginusername(state.form)
                    if(code==200){
                router.push({name:'main'})
                localStorage.setItem('username',result.username)
                sessionStorage.setItem('token',token)
                    }
                }else{
                    ElMessage.error('登录信息有误，请重新输入')
                }
            })
        }

        const resetForm = ()=>{
            myform.value.resetFields()
        }
        onMounted(()=>{

            //判断如果有proxy里的值就写，否则写localstorage里的值
            console.log(proxy);
            if(proxy.$root.$route.query.username){
            state.form.username = proxy.$root.$route.query.username 
            }else{
            state.form.username = localStorage.getItem('username')
            }
            
        })

        return{
            ...toRefs(state),
            myform,
            submitForm,
            resetForm
        }
    }
}
</script>